<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>动态详情</title>
<link rel="stylesheet" href="./static/css/common.css">
<link rel="stylesheet" href="./static/css/swiper.min.css">
<style>
  .viedoBox{
    height: 230px;
  }
  .header{
    padding: 10px 15px;
  }
  .user{
    display: flex;
    padding:10px 15px;
    align-items:center;
    border-top: 1px solid #F1F0F0;
    border-bottom: 1px solid #F1F0F0;
  }
  .user .headbox{
    width: 34px;
    height: 34px;
    border-radius: 17px;
    overflow: hidden;
  }
  .user .userHead{
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .user .userInfo{
    color: #535252;
    margin-left:10px;
    flex:1;
  }
  .viedoList{
    margin:10px 15px;
  }
  .listbox{
    display: flex;
    margin:10px 0;
    align-items: center
  }
  .listbox .left {
    width: 100px;
    height: 60px;
    margin-right: 10px;
  }
  .listbox .left img{
    display: inline-block;
    width: 100%;
    height: 100%;
  }
  .swiper-wrapper div{
    height:375px;
    overflow: hidden;
    width: 100%;
  }
  .swiper-wrapper .swiperImage{
    width: 100%;
    /* height: 100%; */
    min-height: 100%;
    display: inline-block;
  }
  .user .headbox{
    width: 34px;
    height: 34px;
    border-radius: 17px;
    overflow: hidden;
  }
  .user .userInfo .time{
    color: #e0e0e0;
    font-size: 12px;
  }
  .user .userInfo .userName{
    margin-top: -2px;
  }
  .startbox{
    display: flex;
    align-items: center;
    margin:18px 0;
  }
  .listImage{
  width: 34px;
    height: 34px;
    border-radius: 17px;
    display: inline-block;
    margin-right:2px
  }
  .startImagesbox{
    flex: 1;
    height: 34px;
    overflow: hidden;
  }
  
 
</style>
    
</head>
<body>
  <div id="app" v-cloak>
    <div>
        <div class="user">
          <div class="headbox"><img class="userHead" :src="user.userHeader" alt=""></div>
          <div class="userInfo">
            <div class="userName">{{user.userNick}}</div>
            <div class="time">{{time(user.getTime)}}</div>
          </div>
          <a :href="appUrl" id="appBtn" type="button" >关注</a>
        </div>
        <div class="swiper-container">
          <div class="swiper-wrapper" id="seiper"></div>
          <div class="swiper-pagination"></div>
        </div>
        
        <div class="header">
            <h4 class="font4" style="word-wrap:break-word;font-weight: normal">{{title}}</h4>
            <div class="startbox">
              <div class="startImagesbox">
                  <img class="listImage" v-for="(item,index) in headers" :key="index" v-if="item && index<7" :src="userActive(item)" alt=""/>
              </div>
              <div style="width:106px;color:#535252;text-align: right">等{{headers.length}}人给他点赞</div>
            </div>
            <div>
                <h4 style="font-size:16px">评论</h4>
                <div v-for="(item,index) in comment" :key="index" style="margin-top:10px;padding-bottom:8px;border-bottom:1px solid #e0e0e0">
                    <div class="user" style="border:none;padding:10px 0">
                      <div class="headbox"><img class="userHead" :src="userActive(item.commentUser.userHeader)" alt=""/></div>
                      <div class="userInfo">
                        <div class="userName">{{item.commentUser.userNick}}</div>
                        <div class="time">{{time(item.createtime)}}</div>
                      </div>
                      <div class="gray" style="width:40px;text-align: right" >{{item.commentStars}} <img class="icon" src="./static/like_nor@2x.png" alt=""></div>
                    </div>
                    <div style="margin-left:44px;width:100%;color:#535252">{{item.commentContent}}</div>
                </div>
            </div>
        </div>
        <!-- <div class="footBox">
          <img src="./static/image/logo.png" alt="">
          <div class="center">
            <h5>牙记</h5>
            <div class="fixBoton">牙套计时分享社区</div>
          </div>
          <a :href="appUrl" class="lastBox">立即体验</a>
        </div> -->
      </div>  
  </div>
  <script src="./static/js/jquery-1.10.1.min.js" ></script>
  <script src="./static/js/swiper.min.js"></script>
  <script src="./static/js/vue.js"></script>
  <script src="./static/js/axios.js"></script>
  <script>
    new Vue({
      el:'#app',
      data:{
        appUrl:'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1130246825',
        url:'',
        title:'',
        center:'',
        user:{
          userHeader:'',
          userNick:'',
          createdAt:'',
          getTime:''
        },
        lists:[], //轮播
        comment:[], //评论
        headers:[]
      },
      created() {  
        let url = location.href.split('?');
        let id = '';
      
        Object.keys(url).forEach(function(key){
          if(url[key].indexOf('id=') > -1){
            id = url[key].split('=')
            id = parseInt(id[1])
          }
        });
      
          
        axios.get(`http://47.107.248.44:8181/super_yaji/dynamic/wap/${id}`)
        .then(res =>{
          this.lists = res.data.data.dynamic.images;
          this.user.userHeader = res.data.data.dynamic.dynamicUser.userHeader
          this.user.userNick = res.data.data.dynamic.dynamicUser.userNick;
          this.user.getTime = res.data.data.dynamic.createtime;
          this.title = res.data.data.dynamic.dynamicContent;
          this.comment = res.data.data.comment;
          this.headers = res.data.data.dynamic.stars_header;
          swiperFun(this.lists)
        });
        const  ua = navigator.userAgent.toLowerCase();	
        if (/iphone|ipad|ipod/.test(ua)) {
          this.appUrl = 'https://itunes.apple.com/WebObjects/MZStore.woa/wa/viewSoftware?id=1130246825';
        } else if (/android/.test(ua)) {
        this.appUrl = 'https://a.app.qq.com/o/simple.jsp?pkgname=com.grzx.toothdiary&from=groupmessage'
        }
      },
      methods:{
        time(val) {
          const now =  new Date(val)
          const year = now.getFullYear();
          const month = now.getMonth()+1;
          const date = now.getDate();
          const hour = now.getHours();
          const minute = now.getMinutes();
          const second = now.getSeconds()
          function editTime(time){
            return time < 10? "0"+time : time
          }
          return `${editTime(month)}-${editTime(date)} ${editTime(hour)}:${editTime(minute)}:${editTime(second)}`
        },
        goApp() {
          console.log(121212)
        },
        userActive(val){
          if(!val) return '';
          if (val.indexOf('http://pdpaxe7t4.bkt.clouddn.com') > -1 || val.length > 30) {
            return val
          } else {
            return `http://pdpaxe7t4.bkt.clouddn.com/${val}`
          }
        }
      }
    })

    function swiperFun(obj){
      let ohtm = '';
      for(let i = 0; i < obj.length; i++) {
        ohtm +=`<div class="swiper-slide" style="height:375px"><img class="swiperImage" style="width: 100%;display: inline-block;" src="${obj[i].imageUrl}"/></div>`
      };

      $('#seiper').html(ohtm)
      var mySwiper = new Swiper ('.swiper-container', {
        autoplay: {
          number:500
        },//可选选项，自动滑动
        pagination: {
          el: '.swiper-pagination',
          type: 'bullets',
        }
      })
    }



  </script>
</body>
</html>